<template>
  <div class="upload-con">
    <template v-if="uploadParas.fileNum === 1">
      <div
        class="img-list"
        style="margin-left: 0px"
        v-for="(item, index) in imgList"
        :key="index"
        @mouseover="mouseoverHd(index)"
        @mouseleave="mouseleaveHd(index)"
      >
        <div
          class="mask-con"
          style="
            display: flex;
            justify-content: space-around;
            border-radius: 4px;
          "
          v-if="isShowDel && !loading && activeIndex === index"
        >
          <img
            :src="zoomIn"
            @click.stop="zoomInHandler(item, index)"
            v-if="isShowDel && activeIndex === index"
          />
          <img
            :src="deleteIcon"
            @click.stop="deleteHandler(item, index)"
            v-if="isShowDel && activeIndex === index && editMode !== 'detail'"
          />
        </div>
        <img :src="filePath + item.fileUrl" style="border-radius: 4px" />
      </div>
    </template>
    <template v-if="uploadParas.fileNum !== 1">
      <div
        class="img-list"
        v-for="(item, index) in imgList"
        :key="index"
        :class="{ long: editMode !== 'detail' }"
        @mouseover="mouseoverHd(index)"
        @mouseleave="mouseleaveHd(index)"
      >
        <div
          class="mask-con"
          style="
            display: flex;
            justify-content: space-around;
            border-radius: 4px;
          "
          v-if="isShowDel && !loading && activeIndex === index"
        >
          <img
            :src="zoomIn"
            @click="zoomInHandler(item, index)"
            v-if="isShowDel && activeIndex === index"
          />
          <img
            :src="deleteIcon"
            @click="deleteHandler(item, index)"
            v-if="isShowDel && activeIndex === index && editMode !== 'detail'"
          />
        </div>
        <img :src="filePath + item.fileUrl" style="border-radius: 4px" />
      </div>
    </template>
    <div
      class="img-list"
      v-show="loading"
      :class="{ long: editMode !== 'detail' }"
    >
      <div class="mask-con">
        <div class="upload-progress">
          <div :style="{ width: percentage + '%' }"></div>
        </div>
      </div>
    </div>
    <el-upload
      v-if="editMode !== 'detail' && uploadParas.fileNum > imgList.length"
      :multiple="false"
      :action="actionUrl"
      :headers="headers"
      :on-success="onSuccess"
      :before-upload="onBeforeUpload"
      :show-file-list="false"
      class="upload"
      :on-change="handleOnChange"
      :on-progress="onProgress"
      :disabled="loading"
      :class="{ 'c-stop': loading }"
    >
      <div class="num-tip" v-if="uploadParas.fileNum !== 1">
        {{ imgList.length }}/{{ uploadParas.fileNum }}
      </div>
      <img :src="uploadIcon" v-if="uploadParas.fileNum > imgList.length" />
      <div class="el-upload__tip" slot="tip" v-if="tip">{{ tip }}</div>
    </el-upload>
    <!-- 预览 -->
    <table-row-detail-dialog ref="detailDialog" :dialog-width="dialogwidth">
      <div style="text-align: center">
        <img :src="previewUrl" style="height: 800px" />
      </div>
    </table-row-detail-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import TableRowDetailDialog from '@/components/TableRowDetailDialogNew/index';
function defalutBeforeAvatarUpload(file) {
  // 允许上传的文件格式列表
  let acceptList = ['svg', 'png', 'jpg', 'jpeg', 'bmp'];
  // 根据文件名获取文件的后缀名
  let fileType = file.name.split('.').pop().toLowerCase();
  // 判断文件格式是否符合要求
  if (acceptList.indexOf(fileType) === -1) {
    this.$message.error('请按照提示上传图片，不能上传 ' + fileType + ' 格式!');
    return false;
  }
}
export default {
  name: 'CImgUpload',
  components: {
    TableRowDetailDialog
  },
  props: {
    tip: {
      type: String,
      default: ''
    },
    editMode: {
      type: String,
      default: 'edit'
    },
    initList: {
      type: '',
      default: ''
    },
    path: {
      type: String,
      default: ''
    },
    actionUrl: {
      type: String,
      default: ''
    },
    beforeUpload: {
      type: Function,
      default: defalutBeforeAvatarUpload
    },
    uploadParas: {
      type: Object,
      default: () => ({
        type: 'image', //file,image(单个，多个)，video
        fileNum: 1
      })
    }
  },
  computed: {
    headers() {
      let token = getToken();
      return token ? { Authorization: token } : {};
    }
  },
  data() {
    return {
      filePath: filePath,
      loading: false,
      percentage: 0,
      uploadIcon: require('@/assets/widget/upload-plus.png'),
      dialogVisible: false,
      dialogImageUrl: '',
      imgList: [],
      add: require('@/assets/add.svg'),
      deleteIcon: require('@/assets/widget/delete.png'),
      zoomIn: require('@/assets/widget/zoom-in.png'),
      isShowDel: false,
      activeIndex: null,
      previewUrl: '',
      dialogwidth: '80%'
    };
  },
  created() {},
  watch: {
    initList: {
      handler: function (val) {
        if (!val) return;
        const v = val.filter(i => i.fileUrl);
        if (v.length) {
          this.setImgList(v);
        } else {
          this.setImgList([]);
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    onSuccess(res, file, fileList) {
      this.$emit('uploadSuccess', res, file, fileList);
      this.imgList.push(res);
    },
    onBeforeUpload(file) {
      const valid = this.beforeUpload(file);
      if (valid === false) {
        this.loading = false;
        this.percentage = 0;
        return false;
      }
    },
    onRemove() {
      this.$emit('remove');
    },
    handleOnChange(file, fileList) {
      this.loading = true;
      if (file.percentage == 100) {
        this.loading = false;
        this.percentage = 0;
      }
    },
    onProgress(file) {
      this.percentage = file.percent;
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    deleteHandler(item, index) {
      this.imgList.splice(index, 1);
      this.$emit('remove', index);
    },
    mouseoverHd(index) {
      this.isShowDel = true;
      this.activeIndex = index;
    },
    mouseleaveHd(index) {
      this.isShowDel = false;
      this.activeIndex = null;
    },
    zoomInHandler(item, index) {
      this.$refs.detailDialog.show();
      this.previewUrl = this.filePath + item.fileUrl;
    },
    setImgList(imgList) {
      this.imgList = imgList;
    }
  }
};
</script>
<style lang="scss" scoped>
.upload {
  position: relative;
  //display: inline-block;
}
.close {
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: red;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.w-200 {
  max-width: 200px;
}
.upload-con {
  display: flex;
  background: #f8f8f9;
  border: 1px solid #e5e5e5;
  min-height: 200px;
  flex-wrap: wrap;
  gap: 0 50px;
}
::v-deep .el-upload {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 1;
  background: #edf1ff;
  box-sizing: border-box;
  border: 1px dashed #0d48ce;
  position: relative;
}
.upload-progress {
  width: 80%;
  height: 6px;
  background: #fff;
  border-radius: 3px;
  padding: 1px;
  > div {
    height: 4px;
    border-radius: 3px 0px 0px 3px;
    background: #0d48ce;
  }
}
.long {
  // margin-left: 50px;
}
.img-list {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  position: relative;
  opacity: 1;
  > img {
    width: 100%;
    height: 100%;
  }
  .mask-con {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      cursor: pointer;
    }
  }
}
.num-tip {
  position: absolute;
  bottom: 0;
  right: 4px;
}
</style>
